.auth {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;

  .auth-owner {
    .owner-title {
      display: flex;
      align-items: center;

      h5 {
        margin: 0;
        white-space: nowrap;
        transform: translateY(-2px);
      }

      span {
        margin: 0 10px;
      }
    }

    :global(.arco-descriptions-item) {
      width: 25%;
    }
  }

  .auth-tabs {
    margin-bottom: 15px;

    :global(.arco-card-body) {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .auth-history-icon {
        font-size: 23px;
        cursor: pointer;
        color: var(--color-border-4);
      }
    }
  }

  .button-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .auth-roles {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    .role-tree {
      width: 250px;

      .role-add {
        margin-top: 10px;
        width: 100%;
      }

      .role-search {
        margin-bottom: 15px;
      }

      .role-list {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        max-height: 1000px;
        overflow: auto;

        .role-item,
        .role-item-active {
          display: flex;
          align-items: center;
          margin-bottom: 4px;
          padding: 0 15px;
          justify-content: space-between;
          box-sizing: border-box;
          height: 34px;

          .role-text {
            line-height: 35px;
            height: 100%;
            flex: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100%;
          }

          .role-icon {
            display: none;
          }

          &:hover {
            background-color: var(--color-fill-2);

            .role-icon {
              font-size: 17px;
              display: block;
              height: 100%;
              box-sizing: content-box;
            }
          }
        }

        .role-item-active {
          background-color: var(--color-fill-2);

          .role-text {
            color: rgb(var(--primary-6)) !important;
          }
        }

        :global(.arco-empty-wrapper) {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 50px 0;
        }
      }
    }

    .role-table {
      flex: 1;

      .table-title {
        margin-bottom: 15px;
        display: flex;
        align-items: center;

        h5 {
          white-space: nowrap;
          margin: 0 10px;
          transform: translateY(-2px);
        }
      }
    }

    .role-permission {
      .permission-item {
        display: flex;
        flex-direction: column;
        margin: 8px 0;

        .permission-checkbox {
          margin-bottom: 10px;

          .permission-title {
            font-size: 14px;
            font-weight: bold;
          }
        }

        .permission-checkbox-group {
          display: flex;
          flex-wrap: wrap;
          gap: 5px 15px;
        }
      }
    }
  }
}

.auth-action {
  .auth-action-search {
    display: flex;
    margin: 0 auto 30px;
    width: 350px;
  }
  .auth-action-list {
    max-height: 530px;
    overflow-y: auto;

    .auth-action-item {
      display: flex;
      gap: 20px;
    }
  }

  .auth-action-pagination {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
